<script lang="ts">
	// import Icon from '$lib/components/Basic/Icon/Icon.svelte';

	// 接收的属性
	const {
		checked = false,
		label = '',
		size = 'md',
		disabled = false,
		buttonStyle = false,
		border = false
	} = $props<{
		checked?: boolean;
		label?: string | number;
		size: 'sm' | 'md' | 'lg';
		disabled?: boolean;
		buttonStyle?: boolean;
		border?: boolean;
	}>();
</script>

<div
	class="custom-radio size--{size} {checked ? 'is-checked' : ''} {disabled
		? 'custom-radio--disabled'
		: ''} {buttonStyle ? 'custom-radio--button' : ''} {border ? 'custom-radio--border' : ''}"
	role="radio"
	aria-checked={checked}
	aria-disabled={disabled}
	tabindex={disabled ? -1 : 0}
>
	{#if buttonStyle}
		<span class="radio-button">{label}</span>
	{:else}
		<div class="radio-container">
			{#if checked}
				<div class="radio-icon"></div>
			{/if}
		</div>
		{#if label}
			<span class="custom-radio__label">{label}</span>
		{/if}
	{/if}
</div>

<style lang="scss" scoped>
	.custom-radio {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		gap: 8px;

		&:not(.custom-radio--disabled) {
			cursor: pointer;
		}

		&.custom-radio--disabled {
			cursor: not-allowed;
			opacity: 0.6;
		}

		.radio-container {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--color-info-300);
			border-radius: 50%;
			flex-shrink: 0;
			box-sizing: content-box;
			.radio-icon {
				border-radius: 50%;
				background-color: var(--radio-color);
			}
		}	
	}

	// 尺寸样式
	.size--sm {
		height: 26px;
		&.custom-radio--border {
			padding: 0 8px;
		}

		.radio-container {
			width: 14px;
			height: 14px;
			.radio-icon {
				width: 6px;
				height: 6px;
			}
		}

		.custom-radio__label {
			font-size: 12px;
			line-height: 14px;
		}

		.radio-button {
			padding: 4px 12px;
			font-size: 12px;
		}
	}

	.size--md {
		height: 28px;
		&.custom-radio--border {
			padding: 0 10px;
		}

		.radio-container {
			width: 15px;
			height: 15px;
			.radio-icon {
				width: 7px;
				height: 7px;
			}		
		}

		.custom-radio__label {
			font-size: 13px;
			line-height: 15px;
		}

		.radio-button {
			padding: 6px 14px;
			font-size: 13px;
		}
	}

	.size--lg {
		height: 30px;
		&.custom-radio--border {
			padding: 0 12px;
		}

		.radio-container {
			width: 16px;
			height: 16px;
			.radio-icon {
				width: 8px;
				height: 8px;
			}
		}

		.custom-radio__label {
			font-size: 14px;
			line-height: 16px;
		}

		.radio-button {
			padding: 8px 16px;
			font-size: 14px;
		}
	}

	// 选中状态样式
	.custom-radio:not(.custom-radio--disabled).is-checked{ 
		.radio-container {
			border-color: var(--radio-color);
			// background-color: var(--radio-color);
		}
		.custom-radio__label {
			color: var(--radio-color);
		}
	}

	
	// 边框样式
	.custom-radio--border {
		border: 1px solid var(--color-info-300);
		border-radius: 4px;
		transition: all 0.2s ease;
		background: var(--color-page);

		// 选中状态
		&:not(.custom-radio--disabled).is-checked {
			border-color: var(--radio-color);
		}

		// 禁用状态
		&.custom-radio--disabled {
			border-color: var(--color-info-300);
			color: var(--color-info-500);
		}

		.radio-container {
			border-color: var(--color-info-400);
			background-color: var(--color-page);
		}

		&.is-checked {
			.radio-container {
				border-color: var(--radio-color);
			}
		}
	}

	// 按钮样式
	.custom-radio--button {
		box-shadow: -1px 0 0 0 var(--color-info-300);
		
		&.is-checked {
			.radio-button {
				background-color: var(--radio-color);
				border-color: var(--radio-color);
				color: var(--color-page);
			}
		}
	}

	// 禁用状态
	.custom-radio.custom-radio--disabled {
		opacity: 0.4;
	}

</style>
